.SceneMars3d {
    width: calc(100vw - 64px);
    height: calc(100vh - 120px);
    overflow: hidden;
    position: relative;
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;

    &>div {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        user-select: none;
        transition: all 0.35s ease;

        &.Map {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            background: rgba(0, 0, 0, 0.35);
        }

        &.Top {
            position: absolute;
            width: calc(100% - 16px);
            height: 80px;
            top: 8px;
            left: 8px;
            background: #262626;
            z-index: 2;

            &.topHiden {
                top: -80px;

                &>.Switch {
                    &>span {
                        transform: rotate(180deg);
                    }
                }
            }


            &>.Switch {
                position: absolute;
                left: calc(50% - 32px);
                bottom: -32px;
                width: 64px;
                height: 24px;
            }
        }

        &.List {
            position: absolute;
            left: 8px;
            top: 96px;
            width: 320px;
            height: calc(100% - 104px);
            background: #262626;
            z-index: 2;


            &.topHiden {
                top: 8px;
                height: calc(100% - 16px);
            }

            &.listHiden {
                left: -320px;

                &>.Switch {
                    &>span {
                        transform: rotate(180deg);
                    }
                }
            }


            &>.Switch {
                position: absolute;
                top: calc(50% - 32px);
                right: -32px;
                width: 24px;
                height: 64px;
                z-index: 2;
            }
        }

        &>.Switch {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: #262626;
            border-radius: 6px;

            &>span {
                color: #f8f8f8;
                font-size: 16px;
                transition: all .35s;
            }

        }

        &.Details {
            position: absolute;
            right: 8px;
            top: 96px;
            width: 320px;
            height: calc(100% - 104px);
            background: #262626;
            z-index: 2;

            &.topHiden {
                top: 8px;
                height: calc(100% - 16px);
            }

            &.detailsHiden {
                right: -320px;
            }
        }
    }

}